<template>
  <div class="comment">
    <div class="avatar">
      <img
        :src="info.img_head ? $api.imgUrl + info.img_head : usrImage"
        alt=""
      />
      {{ info.username }}
    </div>
    <div class="time">{{ info.create_time }}</div>
    <div class="content">{{ info.eval_content }}</div>
    <div class="imgWrapper">
      <ul v-if="info.eval_image.length > 0">
        <li
          v-for="(img, index) in JSON.parse(info.eval_image[0])"
          :key="index"
          :style="{
            backgroundImage: `url(${$api.userImg}/uploads/user/${img})`,
            backgroundPosition: 'center center',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover'
          }"
        ></li>
      </ul>
    </div>
  </div>
</template>

<script>
import usrImage from "@/assets/img/user.png";
export default {
  name: "comment",
  props: {
    info: {
      type: Object
    }
  },
  data() {
    return {
      usrImage
    };
  }
};
</script>

<style scoped lang="stylus">
.comment{
  padding 34px 24px;
  border-bottom 1px solid #D6D6D6
  background white
  position relative
  .avatar{
    font-size:20px;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    margin-bottom 19px;
    img{
      width 50px
      height 50px
      border-radius 50%
      vertical-align middle
    }
  }
  .time{
    position absolute
    right 24px
    top: 50px
    font-size:22px;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  .content{
    font-size:24px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  ul{
    margin-top 24px
    li{
      margin-bottom 10px
      margin-right 2%
      width 21.5%
      padding-bottom 21.5%
    }
  }
}
</style>
